<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
    <meta name="author" content="http://jeesite.com/"/>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=8,IE=9,IE=10"/>
    <meta http-equiv="Expires" content="0">
    <meta http-equiv="Cache-Control" content="no-cache">
    <meta http-equiv="Cache-Control" content="no-store">
    <script src="/static/jquery/jquery-3.4.0.min.js" type="text/javascript"></script>
    <link href="/static/bootstrap/2.3.1/css_cerulean/bootstrap.min.css"
          type="text/css" rel="stylesheet"/>
    <script src="/static/bootstrap/2.3.1/js/bootstrap.min.js" type="text/javascript"></script>
    <link href="/static/bootstrap/2.3.1/awesome/font-awesome.min.css" type="text/css" rel="stylesheet"/>
    <link href="/static/jquery-select2/3.4/select2.min.css" rel="stylesheet"/>
    <script src="/static/jquery-select2/3.4/select2.min.js" type="text/javascript"></script>
    <link href="/static/jquery-validation/1.11.0/jquery.validate.min.css" type="text/css" rel="stylesheet"/>
    <script src="/static/jquery-validation/1.19.0/jquery.validate.min.js" type="text/javascript"></script>
    <link href="/static/jquery-jbox/2.3/Skins/Bootstrap/jbox.min.css" rel="stylesheet"/>
    <script src="/static/jquery-jbox/2.3/jquery.jBox-2.3.min.js" type="text/javascript"></script>
    <script src="/static/My97DatePicker/WdatePicker.js" type="text/javascript"></script>
    <script src="/static/common/mustache.min.js" type="text/javascript"></script>
    <link href="/static/common/jeesite.min.css" type="text/css" rel="stylesheet"/>
    <script src="/static/common/jeesite.min.js" type="text/javascript"></script>
    <link rel="Stylesheet" href="/static/jerichotab/css/jquery.jerichotab.css" />
    <script type="text/javascript" src="/static/jerichotab/js/jquery.jerichotab.js"></script>
    <title>菜单管理</title>
    <meta name="decorator" content="default"/>
    <link href="/static/treeTable/themes/vsStyle/treeTable.min.css" rel="stylesheet" type="text/css"/>
    <link href="/static/treeTable/themes/default/jquery.treetable.css" rel="stylesheet" type="text/css"/>
    <style type="text/css">
        table.treetable tr.collapsed span.indenter a {
            background-image: url();
        }

        table.treetable tr.expanded span.indenter a {
            background-image: url();
        }
    </style>
    <script src="/static/treeTable/jquery.treetable.js" type="text/javascript"></script>
    <script type="text/javascript">
        var leftWidth = 160; // 左侧窗口大小
        var tabTitleHeight = 33; // 页签的高度
        var htmlObj = $("html"), mainObj = $("#main");
        var headerObj = $("#header"), footerObj = $("#footer");
        var frameObj = $("#left, #openClose, #right, #right iframe");
        $(document).ready(function () {
            $("#treeTable").treetable({ expandable: true });
            $.fn.initJerichoTab({
                renderTo: '#right', uniqueId: 'jerichotab',
                contentCss: {'height': $('#right').height() - tabTitleHeight},
                tabs: [], loadOnce: true, tabWidth: 110, titleHeight: tabTitleHeight
            });
        });

        function updateSort() {
            loading('正在提交，请稍等...');
            $("#listForm").attr("action", "${ctx}/sys/menu/updateSort");
            $("#listForm").submit();
        }
    </script>
</head>
<body>
<ul class="nav nav-tabs">
    <li class="active"><a href="/user/menus/">菜单列表</a></li>
    <li><a href="/menu/add">菜单添加</a></li>
</ul>
<form id="listForm" method="post">
    <table id="treeTable" class="table table-striped table-bordered table-condensed">
        <thead>
        <tr>
            <th>名称</th>
            <th>链接</th>
            <th style="text-align:center;">排序</th>
            <th>可见</th>
            <th>权限标识</th>
            <th>操作</th>
        </thead>
        <tbody>
        <tr th:each="menu:${menus}" th:data-tt-id="${menu.id}" th:data-tt-parent-id="${menu.parentid}">
            <td nowrap style="width: 35%">
                <i class="icon-menu.icon"></i>
                <a href="/sys/menu/form?id=${menu.id}" th:text="${menu.name}"></a>
            </td>
            <td style="width: 25%" th:title="${menu.url}" th:text="${menu.url}"></td>
            <td style="text-align:center;width: 5%" th:text="${menu.sort}">
                <input type="hidden" name="ids" th:value="${menu.id}"/>
                <input name="sorts" type="text" th:value="${menu.sort}"
                       style="width:50px;margin:0;padding:0;text-align:center;">
            </td>
            <td style="width: 5%" th:text="${menu.isshow == 1?'显示':'隐藏'}"></td>
            <td style="width: 10%" th:title="${menu.permission}" th:text="${menu.permission}"></td>
            <td style="width: 20%" nowrap>
                <a href="javascript:void('0')" th:onclick="'updateMenu(\''+${menu.id}+'\');'">修改</a>
                <a href="javascript:void('0')" th:onclick="'confirmDelte(\''+${menu.id}+'\');'">删除</a>
                <a th:if="${menu.url==''}" href="/user/menu/form?parent.id=${menu.id}">添加下级菜单</a>
            </td>
        </tr>
        <script type="text/javascript">

            function confirmDelte(id) {
                var isDelete = window.confirm("要删除该菜单及所有子菜单项吗？");
                if (isDelete) {
                    $.ajax({
                        url: '/menu/delete/' + id,
                        type: 'post',
                        success: function (result) {
                            if (result.success) {
                                alert(result.msg);
                            } else {
                                alert("删除失败，原因：" + result.msg);
                            }
                        }
                    });
                }
            }

            function updateMenu(id){
                var url='/user/menu/'+id;
                window.parent.newTab('修改菜单',url,true);
            }
        </script>
        </tbody>
    </table>
    <div class="form-actions pagination-left">
        <input id="btnSubmit" class="btn btn-primary" type="button" value="保存排序" onclick="updateSort();"/>
    </div>

</form>

</body>
</html>